<template>
    <div class="input-container"
        :class="{
            'input-light': !$store.state.isDarkMode, 
            'input-dark': $store.state.isDarkMode,
            'icon-search': hasIcon
        }"
    >
        <input type="text" :placeholder="placeholder" v-model="content">
    </div>
</template>

<script>
export default {
    name: 'SearchInput',
    data(){
        return{
            content: "",
        }
    },
    props:['placeholder', 'hasIcon', 'getContent'],
    watch:{
        content(newValue){
            if(this.getContent)
                this.getContent(newValue)
        }
    }
}
</script>

<style scoped>
.input-container {
    height: 25px;
    width: 60%;
    border-radius: 30000px;
    margin: 7px 10px;
    padding: 5px;
    padding-bottom: 6px;
    text-align: center;
    vertical-align: top;
}

input {
    height: 30px;
    width: 80%;
    background-color: transparent;
    border: 0;
    outline: none;
    transform: translate(0, -2px);
}

</style>
